 <!--
  调用示例：
  <u-swipe-action>
 	<jp-swipe-action-item v-for="(item,index) in list" :key="item.order_no"
 		:options="configOptions(item)" :name="item.order_no"
 		@click="optionsClick">
 		<view>自定义内容</view>
 	</jp-swipe-action-item>
 </u-swipe-action>

 options: [{
 	text: '拒绝',
 	style: {
 		backgroundColor: 'red',
 		fontSize: '28rpx',
 		padding: '0 24rpx'
 	},
 },{
 	text: '开诊',
 	style: {
 		backgroundColor: 'var(--uni-color-primary)',
 		fontSize: '28rpx',
 		padding: '0 24rpx'
 	},
 }]

 optionsClick(e) {
 	let index = e.index
 	let orderNo = e.name
 } -->
<template>
	<u-swipe-action-item :ref="'swipeItem'+name" :options="options" :name="name"
		@click="optionsClick">
		<slot></slot>
	</u-swipe-action-item>
</template>

<script>
	export default {
		name: "jp-swipe-action-item",
		props: {
			name: {
				type: String,
			},
			options: {
				type: Array,
				default: ()=> []
			},
		},
		options: {
			styleIsolation: 'shared' // 解除样式隔离(解决在子组件中使用deep修改第三方样式失效的问题)
		},
		data() {
			return {
				
			};
		},
		methods: {
			optionsClick(e) {
				this.$refs[`swipeItem${this.name}`].closeHandler()
				this.$emit('click',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-swipe-action-item__content {
		background-color: transparent !important;
	}
</style>
